<template>
  <px-scrollbar v-show="!isMain && isView" class="view-equip-detail">
    <px-button style="margin: 16px 0 24px" type="primary" icon="ArrowLeft" @click="backMainPage">返回</px-button>
    <div class="page-tabs-group">
      <div v-for="item in pageTabs" :key="item.id" class="page-tab" :class="activeTab === item.id ? 'active' : ''" @click="tabClick(item.id)">
        {{ item.label }}
      </div>
    </div>
    <div v-show="activeTab === '0'">
      <div class="view-equip-title">备件信息</div>
      <div class="view-equip-wrap">
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">种类</div>
            <div class="text">{{ formValue?.categoryDesc || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">名称</div>
            <div class="text">{{ formValue?.sparePartName || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">编码</div>
            <div class="text">{{ formValue?.sparePartCode || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">科室</div>
            <div class="text">{{ formValue?.classNameDesc || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">类型</div>
            <div class="text">{{ formValue?.typeName || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">品牌</div>
            <div class="text">{{ formValue?.brandName || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">厂商型号</div>
            <div class="text">{{ formValue?.supplyModel || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">厂内型号</div>
            <div class="text">{{ formValue?.model || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">系统</div>
            <div class="text">{{ formValue?.systemValDesc || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">单位</div>
            <div class="text">{{ formValue?.sparePartUnitDesc || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">库位</div>
            <div class="text">{{ formValue?.warehousePositionDesc || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">等级</div>
            <div class="text">{{ formValue?.sparePartLevelDesc || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">图件号</div>
            <div class="text">{{ formValue?.mapNum || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">责任人</div>
            <div class="text">{{ formValue?.principalName || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">责任人电话</div>
            <div class="text">{{ formValue?.principalPhone || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">额定使用寿命</div>
            <div class="text" v-if="formValue?.usedLife">{{ formValue?.usedLife + formValue?.usedLifeUnitDesc }}</div>
            <div class="text" v-else>-</div>
          </div>
          <div class="view-equip-item large">
            <div class="label">备注</div>
            <div class="text">{{ formValue?.remark || "-" }}</div>
          </div>
        </div>
      </div>
      <div class="view-equip-title">库存设置</div>
      <div class="view-equip-wrap">
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">安全库存量</div>
            <div class="text">{{ formValue?.alarmStock }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">应备数量</div>
            <div class="text">{{ formValue?.shouldStock }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">库存上限</div>
            <div class="text">{{ formValue?.maxStock }}</div>
          </div>
        </div>
      </div>
      <div class="view-equip-title">备件图片</div>
      <div style="display: flex; flex-wrap: wrap; margin-bottom: 16px">
        <PhotoUpload v-if="!isMain && isView" photoType="view" :photoData="{ moduleName: moduleName }" :photoList="formValue?.pictureList" />
      </div>
      <div class="view-equip-title">关联文档</div>
      <div class="view-equip-content" style="margin-bottom: 24px">
        <FileUpload v-if="!isMain && isView" fileType="view" :fileData="{ moduleName: moduleName }" :fileList="formValue?.fileList" />
      </div>
    </div>
    <div v-show="activeTab === '1'">
      <px-table :data="warehousingTableData" class="equip-table" size="small" height="calc(100vh - 273px)" border>
        <px-table-column type="index" label="序号" width="80" align="center" fixed="left" />
        <px-table-column
          v-for="(item, index) in warehousingTableColumns"
          :key="index"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope">{{
            scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
          }}</template>
        </px-table-column>
        <px-table-column fixed="right" label="操作" width="100" align="center">
          <template #default="scope">
            <px-tooltip content="查看详情" placement="top">
              <px-button link type="primary" icon="Tickets" @click="handleWarehousingView(scope.row)" />
            </px-tooltip>
          </template>
        </px-table-column>
      </px-table>
    </div>
    <div v-show="activeTab === '2'">
      <px-table :data="outboundTableData" class="equip-table" size="small" height="calc(100vh - 280px)" border>
        <px-table-column type="index" label="序号" width="80" align="center" fixed="left" />
        <px-table-column
          v-for="(item, index) in outboundTableColumns"
          :key="index"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope">{{
            scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
          }}</template>
        </px-table-column>
        <px-table-column fixed="right" label="操作" width="100" align="center">
          <template #default="scope">
            <px-tooltip content="查看详情" placement="top">
              <px-button link type="primary" icon="Tickets" @click="handleOutboundView(scope.row)" />
            </px-tooltip>
          </template>
        </px-table-column>
      </px-table>
    </div>
    <div v-show="activeTab === '3'">
      <px-table :data="serialTableData" class="equip-table" size="small" height="calc(100vh - 280px)" border>
        <px-table-column type="index" label="序号" width="80" align="center" fixed="left" />
        <px-table-column
          v-for="(item, index) in serialTableColumns"
          :key="index"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope">
            <span
              v-if="item.type"
              :style="{
                color: scope.row.type === '入库' ? '#00b050' : scope.row.type === '出库' ? '#ff0000' : 'rgba(0, 0, 0, 0.8)'
              }"
            >
              {{ scope.row.type || "-" }}
            </span>
            <span
              v-else-if="item.quantity"
              :style="{
                color: scope.row.type === '入库' ? '#00b050' : scope.row.type === '出库' ? '#ff0000' : 'rgba(0, 0, 0, 0.8)'
              }"
            >
              {{ scope.row.quantity || "-" }}
            </span>
            <span v-else>{{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column fixed="right" label="操作" width="100" align="center">
          <template #default="scope">
            <px-tooltip content="查看详情" placement="top">
              <px-button link type="primary" icon="Tickets" @click="handleSerialView(scope.row)" />
            </px-tooltip>
          </template>
        </px-table-column>
      </px-table>
    </div>
    <div v-show="activeTab === '4'">
      <px-table :data="eqpTableData" class="equip-table" size="small" height="calc(100vh - 334px)" border>
        <px-table-column
          v-for="(item, index) in eqpTableColumns"
          :key="index"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope">
            {{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}
          </template>
        </px-table-column>
        <px-table-column fixed="right" label="操作" width="100" align="center">
          <template #default="scope">
            <px-tooltip content="查看详情" placement="top">
              <px-button link type="primary" icon="Tickets" @click="handleEqp(scope.row)" />
            </px-tooltip>
          </template>
        </px-table-column>
      </px-table>
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        class="equip-table-pagination"
        :total="total"
        @pagination="getEquipTable"
      />
    </div>
    <!-- 入库详情/出库详情弹窗 -->
    <ViewDetailDialog
      :id="id"
      :visible="dialogVisible"
      :dialogType="dialogType"
      :sparePartsId="sparePartsIdValue"
      @closeDialog="dialogVisible = false"
    />
  </px-scrollbar>
</template>
<script setup lang="ts">
import { reactive, toRefs, watch, computed } from "vue";
import { useRouter } from "vue-router";
import PhotoUpload from "@/components/Upload/PhotoUpload.vue";
import FileUpload from "@/components/Upload/FileUpload.vue";
import ViewDetailDialog from "./ViewDetailDialog.vue";
import {
  getSparePartsLedgerNew,
  queryWarehousingLedger,
  queryOutboundLedger,
  getModuleNameNew,
  queryInOutRecordPage,
  queryListBySpareModel
} from "@/api/equip/spareParts";

const router = useRouter();
// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["backMainPage"]);
// 父级传过来的值
const props = defineProps(["isMain", "isView", "sparePartsId", "sparePartsModelCode"]);
// 显示隐藏
const isMain = computed(() => props.isMain);
const isView = computed(() => props.isView);
// 页面本身的值
const state = reactive<any>({
  pageTabs: [
    { id: "0", label: "备件信息" },
    { id: "1", label: "入库明细" },
    { id: "2", label: "出库明细" },
    { id: "3", label: "出入库流水" },
    { id: "4", label: "关联设备" }
  ],
  activeTab: "0", // 默认在备件信息tab
  formValue: {
    pictureList: [],
    fileList: []
  },
  warehousingTableColumns: [
    { prop: "inNum", label: "入库单号", minWidth: "250", showOverflowTooltip: true, fixed: "left" },
    { prop: "inboundName", label: "入库人员", minWidth: "140", showOverflowTooltip: true },
    { prop: "classNameDesc", label: "科室", minWidth: "140", showOverflowTooltip: true },
    { prop: "categoryDesc", label: "种类", minWidth: "140", showOverflowTooltip: true },
    { prop: "type", label: "类型", minWidth: "140", showOverflowTooltip: true },
    { prop: "brandValDesc", label: "品牌", minWidth: "140", showOverflowTooltip: true },
    { prop: "quantity", label: "入库数量", minWidth: "140", showOverflowTooltip: true },
    { prop: "inDate", label: "入库日期", minWidth: "160", showOverflowTooltip: true }
  ],
  outboundTableColumns: [
    { prop: "outNum", label: "出库单号", minWidth: "200", showOverflowTooltip: true, fixed: "left" },
    { prop: "recipientName", label: "领用人", minWidth: "140", showOverflowTooltip: true },
    { prop: "usedDesc", label: "用途", minWidth: "120", showOverflowTooltip: true },
    { prop: "classNameDesc", label: "科室", minWidth: "120", showOverflowTooltip: true },
    { prop: "categoryDesc", label: "种类", minWidth: "120", showOverflowTooltip: true },
    { prop: "type", label: "类型", minWidth: "120", showOverflowTooltip: true },
    { prop: "brandValDesc", label: "品牌", minWidth: "120", showOverflowTooltip: true },
    { prop: "quantity", label: "出库数量", minWidth: "120", showOverflowTooltip: true },
    { prop: "outDate", label: "出库日期", minWidth: "160", showOverflowTooltip: true }
  ],
  serialTableColumns: [
    { prop: "inOutDate", label: "日期", minWidth: "160", showOverflowTooltip: true },
    { prop: "type", label: "类型", minWidth: "120", showOverflowTooltip: true, type: true },
    { prop: "orderNum", label: "单号", minWidth: "280", showOverflowTooltip: true },
    { prop: "quantity", label: "数量", minWidth: "120", showOverflowTooltip: true, quantity: true },
    { prop: "operateName", label: "操作人", minWidth: "120", showOverflowTooltip: true }
  ],
  eqpTableColumns: [
    { prop: "eqpId", label: "设备编号", minWidth: "180", showOverflowTooltip: true },
    { prop: "eqpName", label: "设备名称", minWidth: "120", showOverflowTooltip: true },
    { prop: "systemName", label: "系统", minWidth: "120", showOverflowTooltip: true },
    { prop: "categoryName", label: "设备总称", minWidth: "120", showOverflowTooltip: true },
    { prop: "typeName", label: "设备类型", minWidth: "120", showOverflowTooltip: true },
    { prop: "modelName", label: "设备型号", minWidth: "120", showOverflowTooltip: true }
  ],
  warehousingTableData: [],
  outboundTableData: [],
  serialTableData: [],
  eqpTableData: [],
  dialogVisible: false,
  dialogType: "warehousing",
  sparePartsIdValue: "",
  id: "",
  moduleName: "",
  queryParams: {
    pageNum: 1,
    pageSize: 20
  },
  total: 0
});
const {
  pageTabs,
  activeTab,
  formValue,
  warehousingTableColumns,
  outboundTableColumns,
  serialTableColumns,
  eqpTableColumns,
  warehousingTableData,
  outboundTableData,
  serialTableData,
  eqpTableData,
  dialogVisible,
  dialogType,
  sparePartsIdValue,
  id,
  moduleName,
  queryParams,
  total
} = toRefs(state);
// 监视isMain和isView值
watch(isMain, async val => {
  if (!val && props.isView) {
    activeTab.value = "0";
    tabClick("0");
    getModuleNameNewValue();
  } else {
    formValue.value = {
      pictureList: [],
      fileList: []
    };
  }
});
// 点击tab显示页面详情
const tabClick = async id => {
  activeTab.value = id;
  if (id === "0") {
    formValue.value.pictureList = [];
    formValue.value.fileList = [];
    const params = {
      id: props.sparePartsId
    };
    const data = await getSparePartsLedgerNew(params);
    formValue.value = data;
    formValue.value.pictureList = data.pictureList || [];
    formValue.value.fileList = data.fileList || [];
  } else if (id === "1") {
    const params = { id: props.sparePartsId };
    const data = await queryWarehousingLedger(params);
    warehousingTableData.value = data || [];
  } else if (id === "2") {
    const params = { id: props.sparePartsId };
    const data = await queryOutboundLedger(params);
    outboundTableData.value = data || [];
  } else if (id === "3") {
    const params = { sparePartId: props.sparePartsId };
    const data = await queryInOutRecordPage(params);
    serialTableData.value = data?.data || [];
  } else if (id === "4") {
    queryParams.value = {
      pageNum: 1,
      pageSize: 20
    };
    getEquipTable();
  }
};
// 获取设备列表
const getEquipTable = async () => {
  const params = { modelCode: props.sparePartsModelCode, ...queryParams.value };
  const data = await queryListBySpareModel(params);
  eqpTableData.value = data?.data || [];
  total.value = data?.total;
};
// 返回主页面
const backMainPage = () => {
  emits("backMainPage");
};
// 获取getModuleNameNew
const getModuleNameNewValue = async () => {
  const data = await getModuleNameNew({});
  moduleName.value = data;
};
// 查看入库详情
const handleWarehousingView = (row: any) => {
  sparePartsIdValue.value = props.sparePartsId;
  id.value = row.id;
  dialogType.value = "warehousing";
  dialogVisible.value = true;
};
// 查看出库详情
const handleOutboundView = (row: any) => {
  sparePartsIdValue.value = props.sparePartsId;
  id.value = row.id;
  dialogType.value = "outbound";
  dialogVisible.value = true;
};
// 查看出入库流水，跳转到出库入库详情
const handleSerialView = row => {
  sparePartsIdValue.value = props.sparePartsId;
  id.value = row.inOutId;
  if (row.type === "入库") {
    dialogType.value = "warehousing";
  } else if (row.type === "出库") {
    dialogType.value = "outbound";
  }
  dialogVisible.value = true;
};
// 跳转到设备台账
const handleEqp = row => {
  router.push(`/all/equip/archive/list?eqpId=${row.eqpId}`);
};
</script>
<style lang="scss" scoped>
@import url("@/views/all/equip/scss/view-detail.scss");
.equip-table-pagination {
  position: absolute;
  right: 8px;
  bottom: 0;
}
</style>
